<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>附近违章</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
  <div id="map" class="amap-demo"></div>
  <div class="markico">
    <ul>
      <li>
          <img src="http://download.bihuapp.com/icon/s1.png" alt="高发路段">
          <h4>高发路段</h4>
      </li>
      <li>
          <img src="http://download.bihuapp.com/icon/s2.png" alt="多发路段">
          <h4>多发路段</h4>
      </li>
      <li>
          <img src="http://download.bihuapp.com/icon/s3.png" alt="低发路段">
          <h4>低发路段</h4>
      </li>
    </ul>
  </div>
</div>
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=86c828528c190d211a6c9f6172942ef1"></script>
<script>
new Vue({
  el: '#app',
  data: {
      title: '附近违章',
      zoom: 13,
      center: [118.041275, 37.3852386],
      mapdata: [],
      markers: [],
      token:''
  },
  created () {
    mag.toLogin(function(rs) {
      this.token = rs.token
      localStorage.setItem('token', rs.token)
    })
  },
  mounted: function () {
      this.fetchData()    
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      let that = this
      mag.getLocation(res => {
        this.center = [res.lng, res.lat]
      })
      let map = new AMap.Map('map', {
        center: that.center,
        zoom: 14,
        resizeEnable: true
      })      
      let postparams = {
        token: localStorage.getItem('token'),
        lat: this.center[1],
        lon: this.center[0]
      }
      let markerObject={},marker,markers=[]
      axios.post('/Rule/getHighPecPlace', postparams).then(({data}) => {
        if (data.code === 200) {
          let datas = data.data
          datas.forEach(res => {
            markerObject.position = res.location
            if (res.level === '低') {
              markerObject.icon = 'http://download.bihuapp.com/icon/s3.png'
            } else if (res.level === '中') {
              markerObject.icon = 'http://download.bihuapp.com/icon/s2.png'
            } else {
              markerObject.icon = 'http://download.bihuapp.com/icon/s1.png'
            }
            markerObject.title = res.title
            markerObject.label = {
              offset: new AMap.Pixel(15, 5),  //设置文本标注偏移量
              content: "<div class='info'>"+ res.title +"</div>", //设置文本标注内容
              direction:"right"
            }
            // markerObject.content = res.title
            marker = new AMap.Marker(markerObject)
            markers.push(marker)
          })
          map.add(markers)
        } else {
        }
      })
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#app{
  width: 100%;
  height: 100%;
  position: relative;
}
.white{
  fill: #fff;
}
.blue {
  color: #4F91F2;
}
.text {
    border: none;
    background: transparent;
    color: #333;
}
.text:after {
    border: none;
}
#map.amap-demo {
  position: absolute;
  width: 100%;
  height: 100%;
}
.markico{
  position: fixed;
  bottom: 30px;
  right: 15px;
  background: #f8f8f8;
  width: 50px;
  text-align: center;
  padding: 15px 10px 0;
  box-shadow: 0 0 8px #ccc;
}
.markico img{
  display: block;
  max-width: 80%;
  margin: 0 auto;
}
.markico h4{
  margin: 10px auto 20px auto;
  font-size: 11px;
  font-weight: 500;
}
.info{
  position: relative;
  top: 0;
  right: 0;
  min-width: 0;
}
.info:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  border-right-color: #fff;
  left: -20px;
  position: absolute;
  width: 0;
  border-width: 10px;
  top: 6px;
}
</style>
</body>
</html>